<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="会员编号" v-model="query.data.memberNo" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="会员账号" v-model="query.data.userName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding:0;">
          <a-form-item>
            <a-input placeholder="客户名称" v-model="query.data.merchantName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select
              placeholder="客户类型"
              :options="SettleList"
              v-model="query.data.merchantType"
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select
              placeholder="审核状态"
              :options="SettleStatusList"
              v-model="query.data.status"
            ></a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="4" :offset='1'>
                    <a-form-item>
                        <a-date-picker style="width:100%;" placeholder="交易时间" format="YYYYMMDD" @change="onChange"
                            v-model="momentDate" :allowClear="isClear" />
                    </a-form-item>
        </a-col>-->
      </a-row>
      <a-row style="margin-bottom: 20px;">
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch"
                >查询</a-button
              >
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="reset"
                >重置</a-button
              >
            </a-col>
            <!-- <a-col :span="6">
                            <a-button class="button_sty" type="primary" @click="conexport">导出</a-button>
            </a-col>-->
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <!-- <p>总计<span class="amountColor amountSize">{{count}}</span>笔 ，成功<span
          class="amountColor amountSize">{{payedCount}}</span>笔 ， 成功金额<span
    class="amountColor amountSize">{{(totalAmount/100).toFixed(2)}}</span>元</p>-->
    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.id"
    >
      <!-- :expandRowByClick='true' -->
      <!-- <div slot="expandedRowRender" slot-scope="record" class="expand">
          <span style='margin-right:15px;'>交易单号：<span class="amountColor">{{record.transOrderNo}}</span></span>
          <span style='margin-right:15px;'>交易手续费：<span class="amountColor">{{record.feeAmount.toFixed(2)}}元</span></span>
          <span style='margin-right:15px;'>D0服务费：<span class="amountColor">{{record.d0SingleAmount}}元</span></span>
          {{record.description}}
      </div>-->
      <span slot="username" slot-scope="record"
        ><span v-if="sensitive == '0'">{{ record.username }}</span
        ><span v-else>{{ record.username | phoneFilter }}</span></span
      >
      <span slot="transTime" slot-scope="record">{{
        record.transTime | timeFilter
      }}</span>
      <span slot="wechat" slot-scope="record">{{
        record.weChatQrCodeStatusName == null
          ? "未知"
          : record.weChatQrCodeStatusName
      }}</span>
      <span slot="alipay" slot-scope="record">{{
        record.aliPayQrCodeStatusName == null
          ? "未知"
          : record.aliPayQrCodeStatusName
      }}</span>
      <span slot="merchantType" slot-scope="record">
        <span v-if="record.merchantType == 'small'">小微商户</span>
        <span v-if="record.merchantType == 'org'">企业</span>
        <span v-if="record.merchantType == 'mer'">个体工商户</span>
      </span>
      <span slot="action" slot-scope="record">
        <div class="btnGroup">
          <div
            v-if="
              record.status != 'in_submission' && record.status != 'rejected' && record.status != 'first_rejected' 
            "
            @click="goDetail(record.id, record.statusName)"
            style="color:#1890ff;"
          >
            详细
          </div>
          <!-- 服务商WEB-商户管理-商户审核查询，点击审核不通过 初审不通过 的详细/继续填写按钮时，提示：无此权限 -->
          <div v-if="record.status === 'rejected' || record.status ==='first_rejected'">
            <ControlButton
              buttonText="详细"
              buttonType="link"
              toolParams="EXPAND_MERCHANT"
              @click="goDetail(record.id, record.statusName)"
            />
          </div>

          <div
            v-if="record.status == 'pass'"
            @click="goWeChat(record.memberNo, record.weChatQrCodeStatusName)"
            style="color:#1890ff;"
          >
            微信
          </div>
          <div
            v-if="record.status == 'pass'"
            @click="goAlipay(record.memberNo, record.aliPayQrCodeStatusName)"
            style="color:#1890ff;"
          >
            支付宝
          </div>

          <ControlButton
            v-if="record.status == 'in_submission'"
            buttonText="继续填写"
            buttonType="link"
            toolParams="EXPAND_MERCHANT"
            @click="
              goModification(
                record.id,
                record.memberNo,
                record.merchantType,
                record.merchantName
              )
            "
          />

          <!-- <div
            v-if="record.status == 'in_submission'"
            @click="
              goModification(
                record.id,
                record.memberNo,
                record.merchantType,
                record.merchantName
              )
            "
            style="color:#1890ff;"
          >
            继续填写
          </div> -->
        </div>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
    <a-modal
      style="top: 30vh;"
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :closable="false"
      :maskClosable="false"
      :footer="null"
    >
      <div class="modal_div">
        <div class="modal_title">
          <h3>您还未设置“商户费率模板”</h3>
        </div>
        <p style="line-height: 30px;text-align: center;">点击“确定”前往设置</p>
        <div class="footClass">
          <a-button
            type="primary"
            class="buttonClass"
            @click="clickhandleCancel"
            >确&emsp;定</a-button
          >
        </div>
      </div>
    </a-modal>

    <a-modal
      style="top: 30vh;"
      :visible="modalVisible2"
      :closable="false"
      :maskClosable="false"
      :footer="null"
    >
      <div class="modal_div">
        <div class="modal_title">
          <h3>尚未开通此功能！</h3>
        </div>
        <div class="footClass">
          <a-button type="primary" class="buttonClass" @click="handleCancel2"
            >确&emsp;定</a-button
          >
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import ControlButton from "@/components/ControlButton";
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "会员编号", dataIndex: "memberNo", width: "12%", align: "center" },
  {
    title: "会员账号",
    // dataIndex: "username",
    scopedSlots: { customRender: "username" },
    width: "10%",
    align: "center"
  },
  {
    title: "客户名称",
    dataIndex: "merchantName",
    width: "11%",
    align: "center"
  },
  {
    title: "客户类型",
    scopedSlots: { customRender: "merchantType" },
    width: "12%",
    align: "center"
  },
  { title: "申请时间", dataIndex: "ctime", width: "12%", align: "center" },
  { title: "审核状态", dataIndex: "statusName", width: "7%", align: "center" },
  {
    title: "微信二维码开通状态",
    scopedSlots: { customRender: "wechat" },
    width: "12%",
    align: "center"
  },
  {
    title: "支付宝二维码开通状态",
    scopedSlots: { customRender: "alipay" },
    width: "12%",
    align: "center"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: "15%",
    align: "center"
  }
];

export default {
  name: "Login",
  components: {
    ControlButton,
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      showModal: false,
      momentDate: moment(new Date()),
      excelurl: "",
      statusList: [],
      SettleList: [
        { label: "全部", value: "all" },
        { label: "企业", value: "org" },
        { label: "个体工商户", value: "mer" },
        { label: "小微商户", value: "small" }
      ],
      SettleStatusList: [
        { label: "全部状态", value: "all" },
        { label: "提交中", value: "in_submission" },
        { label: "待审核", value: "init" },
        { label: "审核通过", value: "pass" },
        { label: "审核不通过", value: "rejected" }
      ],
      transTypeList: [],
      query: {
        data: {
          memberNo: null,
          userName: null,
          merchantName: null,
          merchantType: "all",
          status: "all"
        },
        page: 1,
        pageSize: 10
      },
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      modalVisible: false,
      modalVisible2: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 }
        }
      },
      sensitive: localStorage.getItem("sensitive")
    };
  },
  watch: {},
  filters: {
    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    phoneFilter(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    }
  },
  computed: {},
  created() {},
  activated() {
    this.getExistDataProduct();
    this.handleSearch();
  },
  mounted() {
    // this.transTypeQuery();
    // this.statusQuery();
    // this.SettleStatusQuery();
    // // 获取今天日期
    //     var date = new Date();
    //     var month = date.getMonth();
    //     var dates = date.getDate();
    //     if (date.getMonth() < 9) {
    //       month = "0" + parseInt(month + 1);
    //     } else {
    //       month = month + 1;
    //     }
    //     if (date.getDate() <= 9) {
    //       dates = "0" + date.getDate();
    //     }
    //     this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
  },
  methods: {
    moment,
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },
    onChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.data.transDate = dateStrings;
      console.info(this.query.data.transDate);
    },
    getExistDataProduct() {
      let data = {};
      this.$axios.post("/agent/business/config/query/feeTemplate", data).then(
        res => {
          if (res.data.code == "OK") {
            this.showModal = false;
            // this.modalVisible = false;
          } else {
            this.showModal = true;
            // this.modalVisible = true;
          }
        },
        err => {}
      );
    },
    reset() {
      this.query.data = {
        memberNo: null,
        userName: null,
        merchantName: null,
        merchantType: "all",
        status: "all"
      };

      // var date = new Date();
      // this.momentDate = moment(date);
      // var month = date.getMonth();
      // var dates = date.getDate();
      // if (date.getMonth() < 9) {
      //   month = "0" + parseInt(month + 1);
      // } else {
      //   month = month + 1;
      // }
      // if (date.getDate() <= 9) {
      //   dates = "0" + date.getDate();
      // }
      // this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
    }, //重置
    goModification(id, memberno, type, merchantName) {
      if (this.showModal) {
        this.modalVisible = true;
      } else {
        this.modalVisible = false;
        if (memberno) {
          if (type == "small") {
            sessionStorage.setItem("orgBMemberNo", memberno);
            sessionStorage.setItem("orgBMerchantName", merchantName);
            sessionStorage.removeItem("orgAMemberNo");
            sessionStorage.removeItem("orgAMerchantName");

            this.$router.push("/OrgRegister/userTypeB/step1");
          } else {
            sessionStorage.setItem("orgAMemberNo", memberno);
            sessionStorage.setItem("orgAMerchantName", merchantName);
            sessionStorage.removeItem("orgBMemberNo");
            sessionStorage.removeItem("orgBMerchantName");
            this.$router.push("/OrgRegister/userTypeA/step1");
          }
        }
      }
    },
    conexport() {
      console.info(this.query.data);
      this.$axios
        .post("/agent/transaction/fetchExportQuery", this.query.data)
        .then(res => {
          let token = localStorage.getItem("token");
          let downloadUrl =
            "/agent/transaction/excelDownloadTrans?Authorization=" + token;
          location.href = downloadUrl;
        });
    },
    protocolstatus() {
      //此方法是用来填充状态的
      this.transTypeList = [];
      this.$axios.get("/agent/transaction/protocolList").then(res => {
        console.info(res);
        this.transTypeList.push({ label: "全部", value: "" });
        for (var i = 0; i < res.data.list.length; i++) {
          this.transTypeList.push({
            label: res.data.list[i].transName,
            value: res.data.list[i].transCode
          });
        }
      });
    },
    // 交易类型查询
    transTypeQuery() {
      let data = {
        groupCode: "offilne_trans_type"
      };
      api.statusQuery(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.transTypeList = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.value,
                label: item.label
              };
              this.transTypeList.push(itemList);
            });
          } else {
          }
        },
        err => {}
      );
    },
    //交易状态查询
    statusQuery() {
      let data = {
        groupCode: "offline_trans_status"
      };
      api.statusQuery(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.statusList = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.value,
                label: item.label
              };
              this.statusList.push(itemList);
            });
          } else {
          }
        },
        err => {}
      );
    },
    //结算状态查询
    SettleStatusQuery() {
      let data = {
        groupCode: "offline_settle_status"
      };
      api.statusQuery(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.SettleStatusList = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.paramKey,
                label: item.paramValue
              };
              this.SettleStatusList.push(itemList);
            });
          } else {
          }
        },
        err => {}
      );
    },
    // 商户审核查询
    handleSearch() {
      this.loading = true;
      console.info(this.query);
      this.$axios
        .post("/agent/merchant/network/checkQuery", this.query)
        .then(res => {
          console.info(res);
          if (res.data.code == "OK") {
            this.loading = false;
            this.list = res.data.list;
            this.pagination.current = res.data.current;
            this.pagination.total = res.data.total;
            // this.count = res.total; //总笔数
            // this.payedCount = res.payedCount; //成功笔数
            // this.totalAmount = res.totalAmount.toFixed(2); //总金额
          } else {
            this.loading = false;
            // this.$message.info(res.message)
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        });
    },
    goDetail(id, statusName) {
      console.log(id, statusName);
      if (statusName == "审核不通过" && this.showModal) {
        this.modalVisible = true;
      } else {
        this.modalVisible = false;
        // this.$router.push(`/org/transmanage/${id}/transquerydetail`)
        this.$router.push(`/OrgRegister/orgAuditQueryDetail/${id}`);
      }
    },
    goWeChat(id, type) {
      if (type == "未开通" || type == "未知") {
        this.modalVisible2 = true;
      } else {
        this.$router.push(`/OrgRegister/openWeChat/${id}`);
      }
    },
    goAlipay(id, type) {
      if (type == "未开通" || type == "未知") {
        this.modalVisible2 = true;
      } else {
        this.$router.push(`/OrgRegister/openAlipay/${id}`);
      }
    },
    handleOk(e) {
      setTimeout(() => {
        this.modalVisible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    handleCancel2(e) {
      this.modalVisible2 = false;
    },
    clickhandleCancel() {
      this.modalVisible = false;
      this.$router.push("/org/transmanage/addnewrate/offline_merchant");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px;
}

.button_sty {
  width: 100%;
}
.footClass {
  text-align: center;
}

.buttonClass {
  margin-top: 20px;
  width: 110px;
}

.modal_div {
  padding: 20px;
}

.modal_title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}

.modal_title p {
  margin-bottom: 5px;
}

.btnGroup {
  display: flex;
  justify-content: space-around;
  // div{
  //   padding-right: 15px;
  // }
}
</style>
